﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=1">
    <meta name="format-detection" content="telephone=no">
    <meta charset="UTF-8">
    <title>6-2 ref，reactive 响应式引用的用法和原理</title>
    <link rel="stylesheet" href="../../css/bootstrap.css"/>
    <script src="../../js/jquery-2.2.0.min.js"></script>
    <script src="../../js/bootstrap.min.js"></script>
</head>
<body>
<h1>6-2 ref，reactive 响应式引用的用法和原理</h1>

<div id="app">
    <div>
        <p>我是ref里的数据:{{nameVal}}</p>
        <p>我是reactive里的数据:name:{{formState.name}},age:{{formState.age}}</p>
        <p>toRefs的的name和age也可以响应式:name:{{name}},age:{{age}}</p>
    </div>
</div>
<script src="../../js/vue-3.2.26.js"></script>
<script src="../../node_modules/axios/dist/axios.js"></script>
<script src="../../node_modules/lodash/lodash.js"></script>

<script>

    // 引了vue.js会存在一个Vue的全局变量
    const app = Vue.createApp({
        /**
         * ref reactive 响应式的引用
         * 原理 通过proxy对数据进行封装，当数据变化时，触发模板等内容的更新
         * ref 处理基础类型的数据 String Number Boolean
         * reactive 处理非基础类型的数据 Object Array
         */

        setup(props,context){
            const {ref,reactive,toRefs} = Vue;
            // proxy,'dell'变成proxy({value:'我是ref里的值'}) 这样一个响应式的引用
            // vue在底层帮我们在模板里调用过 .value了，所以是 {{name}}  而不是{{name.value}}
            let nameVal = ref('我是ref里的值');

            // proxy ,{name:'kyo',age:3} 变成proxy({name:'kyo',age:3}) 这样一个响应式的引用
            let formState = reactive({
                name:'kyo',
                age:3
            })

            // proxy, toRefs(formState) 可以使得在解构的时候也可以让里面的值也响应式
            // 看以下原理它其实是name:proxy({value:'kyo'})   所以在使用里面解构出来的数据的时候也是需要  .value的
            /*
            {
                name:proxy({value:'kyo'}),
                age:proxy({value:3})
            }
            */
            const {name,age} = toRefs(formState);
            setTimeout(()=>{
                // 响应式的话，我在2s以后改变里面的值，是会实时响应的
                name.value = '2s以后改变的值'
            },2000)
            return {
                nameVal,
                name,age,
                formState
            }
        }
    });
    const vm = app.mount('#app');

</script>

</body>
</html>
